function isEmpty(value){//验证是否为空
	if(value != '' || value.trim().length != 0)
		return false;
	else
		return true;
}

function validation_length(value, min, max){//验证数据成都是否符合，汉字算2个字符
	var length_count = 0;
	value = value.trim();
	for(var i = 0; i < value.length; i++){
		if((value.charCodeAt(i) < 0) || (value.charCodeAt(i) > 255)){
			length_count +=2;
		}else{
			length_count++;
		}
	}
	if(length_count < min || length_count > max){
		return true
	}else{
		return false;
	}
}

/*验证邮箱格式*/
function validation_email(value){
	var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	if(!filter.test(value))
		return true;
}
/*验证手机号码格式*/
function validation_number(value){
	if(!(/^1[34578]\d{9}$/.test(value)))
		return true;
}


var intNumber = 0;
function oData(){
			this.label= '';
			this.type= '';
			this.validation= null;
			this.rules= '';
			this.success= '';
			this.warning= '';

};

function getData(oData){
	var type = getChecked(document.getElementsByName('type'));
	oData.type = type;
	
		switch(type){
			case 'text': 
				oData.label = '输入框'; 
				switch(getChecked(document.getElementsByName('rules'))){
					case 'user':
						var min = $('#min').value;
						var max = $('#max').value;
						oData.rules = '必填，长度为'+ $('#min').value +'-'+$('#max').value;
						oData.success = '输入正确';
						oData.warning = '长度为'+ $('#min').value +'-'+$('#max').value;
						oData.validation = function(){
							if(isEmpty(this.value)){
								return 0;
							}
							if(validation_length(this.value,min, max)){
								return 1;
							}
							return 2;
						};
						break;
					case 'number':
						oData.rules = '必填，请输入数字';
						oData.success = '输入正确';
						oData.warning = '请输入阿拉伯数字';
						oData.validation = function(){
							if(isEmpty(this.value)){
								return 0;
							}
							if(isNaN(+this.value)){
								return 1;
							}
							return 2;
						};
						break;
					case 'email':
						oData.rules = '必填，请输入邮箱';
						oData.success = '邮箱可用';
						oData.warning = '邮箱格式不正确';
						oData.validation = function(){
							if(isEmpty(this.value)){
								return 0;
							}
							if(validation_email(this.value)){
								return 1;
							}
							return 2;
						};
						break;
					case 'password':
						var min = $('#min').value;
						var max = $('#max').value;
						oData.rules = '必填，请输入密码'+min+'-'+max+'位';
						oData.success = '输入正确';
						oData.warning = '请输入密码'+min+'-'+max+'位';
						oData.validation = function(){
							if(isEmpty(this.value)){
								return 0;
							}
							if(validation_length(this.value, min, max)){
								return 1;
							}
							return 2;
						};
						break;
					case 'mobile':
						oData.rules = '必填，请输入手机号';
						oData.success = '输入正确';
						oData.warning = '手机号码不正确';
						oData.validation = function(){
							if(isEmpty(this.value)){
								return 0;
							}
							if(validation_number(this.value)){
								return 1;
							}
							return 2;
						};
					break;
				}
				break;
			case 'radio': 
				if($('#item').children.length == 0){
					alert("请填写至少一个选项");
					oData.type = '';
					break;
				}
				oData.label = '单选框'; 
				oData.rules = '必选项';
				oData.success = '已选择';
				oData.warning = '请选择一个';
				oData.validation = function(name){
					if(getChecked(name)){
						return 0;
					}
					return 2;
				};
				break;
			case 'checkbox': 
				if($('#item').children.length == 0){
					oData.type = '';
					alert("请填写至少一个选项!");
					break;
				}
				oData.label = '多选框'; 
				oData.rules = '必选项';
				oData.success = '已选择';
				oData.warning = '请选择一个';
				oData.validation = function(name){
					if(getChecked(name)){
						return 0;
					}
					return 2;
				};
				break;
			case 'select': 
				if($('#item').children.length == 0){
					oData.type = '';
					alert("请填写至少一个选项!");
					break;
				}
				oData.label = '下拉框';
				oData.rules = '必选项';
				oData.success = '已选择';
				oData.warning = '请选择一个';
				oData.validation = function(name){
					if(getChecked(name)){
						return 0;
					}
					return 2;
				};
				break; 
			case 'textarea': 
				var min = $('#min').value;
				var max = $('#max').value;
				oData.rules = '请输入字符'+min+'-'+max+'位';
				oData.success = '输入合格';
				oData.warning = '请输入字符在'+min+'-'+max+'位';
				oData.validation = function(){
					if(isEmpty(this.value)){
						return 0;
					}
					if(validation_length(this.value, min, max)){
						return 1;
					}
					return 2;
				};
				oData.label = '文本框'; 
				break;
		}
	
	if($('#label').value){
		oData.label = $('#label').value;
	}
}

function setData(oData){
	switch(oData.type){
		case 'text':
			var div = document.createElement('div'),
					label = document.createElement('label'), 
					input = document.createElement('input'), 
					p = document.createElement('p');
			if(getChecked(document.getElementsByName('rules')) == 'password')
				input.type = 'password';
			else
				input.type = 'text';
			div.className = 'input-group';
			label.innerHTML = oData.label;
			p.innerHTML = oData.rules;
			div.appendChild(label);
			div.appendChild(input);
			div.appendChild(p);
			$('.main')[0].appendChild(div);
			input.onblur = function(){
				switch(oData.validation.call(input)){
					case 0:
						p.innerHTML = oData.rules;
						p.style.color = 'red';
						input.style.border = '1px solid red';
						break;
					case 1:
						p.innerHTML = oData.warning;
						p.style.color = 'red';
						input.style.border = '1px solid red';
						break;
					case 2:
						input.style.border = '1px solid green';
						p.innerHTML = oData.success;
						p.style.color = 'green';
						break;

				}
			};
			break;
		case 'radio':
			var div = document.createElement('div'),
					label = document.createElement('label'),
					p = document.createElement('p'),
					temp = '';

			if($('#item').children){
				intNumber++;
				for(var i = 0; i < $('#item').children.length; i++){
					temp += '<input type="radio" name="name' + intNumber + '">'+$('#item').children[i].innerHTML;
				}
			}
			div.className = 'input-group';
			label.innerHTML = oData.label;
			p.innerHTML = oData.rules;
			div.appendChild(label);
			div.innerHTML += temp;
			div.appendChild(p);
			$('.main')[0].appendChild(div);
			div.onclick = function(){
				switch(oData.validation('name'+intNumber)){
					case 0:
						p.innerHTML = oData.warning;
						p.style.color = 'red';
						break;
					case 2:
						p.style.color = 'green';
						p.innerHTML = oData.success;
						break;
				}
			};
			break;
		case 'checkbox':
			var div = document.createElement('div'),
					label = document.createElement('label'),
					p = document.createElement('p'),
					temp = '';

			if($('#item').children){
				
				for(var i = 0; i < $('#item').children.length; i++){
					intNumber++;
					temp += '<input type="checkbox" name="name' + intNumber + '">'+$('#item').children[i].innerHTML;
				}
			}
			div.className = 'input-group';
			label.innerHTML = oData.label;
			p.innerHTML = oData.rules;
			div.appendChild(label);
			div.innerHTML += temp;
			div.appendChild(p);
			$('.main')[0].appendChild(div);
			div.onclick = function(){
				switch(oData.validation('name'+intNumber)){
					case 0:
						p.innerHTML = oData.warning;
						p.style.color = 'red';
						break;
					case 2:
						p.style.color = 'green';
						p.innerHTML = oData.success;
						break;
				}
			};
			break;
		case 'select':
			var div = document.createElement('div'),
					label = document.createElement('label'),
					p = document.createElement('p'),
					select = document.createElement('select'),
					temp = '';

			if($('#item').children){
				
				for(var i = 0; i < $('#item').children.length; i++){
					temp += '<option>' + $('#item').children[i].innerHTML + '</option>';
				}
			}
			div.className = 'input-group';
			label.innerHTML = oData.label;
			p.innerHTML = oData.rules;
			div.appendChild(label);
			select.innerHTML = temp;
			div.appendChild(select);
			div.appendChild(p);
			$('.main')[0].appendChild(div);
			div.onclick = function(){
				switch(oData.validation('name'+intNumber)){
					case 0:
						p.innerHTML = oData.warning;
						p.style.color = 'red';
						break;
					case 2:
						p.style.color = 'green';
						p.innerHTML = oData.success;
						break;
				}
			};
			break;
		case 'textarea':
			var div = document.createElement('div'),
					label = document.createElement('label'),
					p = document.createElement('p'),
					textarea = document.createElement('textarea');

			
			div.className = 'input-group';
			label.innerHTML = oData.label;
			p.innerHTML = oData.rules;
			div.appendChild(label);
			div.appendChild(textarea);
			div.appendChild(p);
			$('.main')[0].appendChild(div);
			textarea.onblur = function(){
				switch(oData.validation.call(this)){
					case 0:
						p.innerHTML = '随便你';
						p.style.color = 'orange';
						break;
					case 1:
						p.innerHTML = oData.warning;
						p.style.color = 'red';
						break;
					case 2:
						p.style.color = 'green';
						p.innerHTML = oData.success;
						break;
				}
			};
			break;
	}
}


$('#generate').onclick = function(){
	var a = new oData();
	getData(a);
		
	setData(a);
};